<template>
      <div class="items">
        <router-link
          active-class="active"
          class="list-group-item"
          to="/solution/accident"
          >Accident</router-link
        >
        <router-link
          active-class="active"
          class="list-group-item"
          to="/solution/wasteChemical"
          >WasteChemical</router-link
        >
        <router-link
          active-class="active"
          class="list-group-item"
          to="/solution/chemical"
          >Chemical</router-link
        >
        <router-link
          active-class="active"
          class="list-group-item"
          to="/solution/equipment"
          >Equipment</router-link
        >
        <router-link
          active-class="active"
          class="list-group-item"
          to="/solution/consumable"
          >Consumable</router-link
        >
        <router-link
          active-class="active"
          class="list-group-item"
          to="/solution/equipmentalPersonnel"
          >EquipmentalPersonnel</router-link
        >
      </div>
        <div class="panel-body">
          <router-view></router-view>
        </div>
</template>

<script setup lang="ts" name="App"></script>

<style scoped>
.items {
  background-color: skyblue;
  float: left;
  width: 180px;
  margin-top: 40px;
  
}
.panel-body {
  float: right;
  margin-top: 40px;
  width: calc(100% - 200px);;
}
</style>

